{% load i18n %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>nbex.com</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
        <meta name="HandheldFriendly" content="true">
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css">
        <!--添加开始  -->
        <meta name="renderer" content="webkit">
        <link rel="apple-touch-icon" href="/resources/img/binance_icon.png">
        <!--添加结束-->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link href="/static/app/css/sm.css" rel="stylesheet" type="text/css">
        <link href="/static/app/css/common.css" rel="stylesheet" type="text/css">
        <link href="/static/app/css/index.css" rel="stylesheet" type="text/css">
        <script src="/static/app/js/jquery-2.2.3.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script>var page='trade';</script>
        <!-- add for app -->
        <script src="/static/app/js/common/common_func.js"></script>
        <script src="/static/app/js/component.js"></script>
	    <script src="/static/app/js/layer/layer.js"></script>
        {% include 'show/common_define.html' %}
        <script type="text/javascript" src="{%url 'javascript-catalog' 'btc.js'%}"></script>
        <script src="/static/lib/csrf.js"></script>
        <title>{% trans '交易' %}</title>
        <!-- add for app end -->
        <style>

            .view {
                position: absolute;
                transition: all .8s cubic-bezier(.55,0,.1,1);
                width: 100%;
                height: calc(100% - 1.75rem);
            }
            .slide-left-enter, .slide-right-leave-active {
                opacity: 0;
                -webkit-transform: translate(30px, 0);
                transform: translate(30px, 0);
            }
            .slide-left-leave-active, .slide-right-enter {
                opacity: 0;
                -webkit-transform: translate(-30px, 0);
                transform: translate(-30px, 0);
            }
        </style>
    </head>
    <body>
        <div id="market-app" class="page-container">
            <div class="page-content">
                <div class="page-view">
                    <div class="market">
                        <div class="btn-tab">
                            <router-link to="./market" class="button" v-bind:class="{'active':select_tab=='market'}" v-on:click="sel_page('market')">行情</router-link>
                            <router-link to="./trade" class="button" v-bind:class="{'active':select_tab=='trade'}" v-on:click="sel_page('trade')" >交易</router-link>
                            <router-link to="./order" class="button" v-bind:class="{'active':select_tab=='order'}" v-on:click="sel_page('order')">当前委托</router-link>
                            <router-link to="./history" class="button" v-bind:class="{'active':select_tab=='history'}" v-on:click="sel_page('history')">历史委托</router-link>
                        </div>
                        <transition :name="transitionName">
                        <router-view class="view"></router-view>
                        </transition>
                    </div>
                </div>
            </div>
            <div class="app_menu">
                <my-menu></my-menu>
            </div>
        </div>
        <script src="/static/app/js/trade/trade.js"></script>
        <script src="/static/app/js/trade/market.js"></script>
        <script src="/static/app/js/trade/order.js"></script>
        <script src="/static/app/js/trade/history.js"></script>
        <script src="/static/app/js/trade.js"></script>
    </body>
</html>
<script>
    var g_coin0 = 'btc'
    var g_coin1 = 'bitcny'

    var params = get_url_params()
    //console.log(params)
    if (params.symbol && params.symbol.length > 0)
    {
        symbol = params.symbol
        pairs  = symbol.split("2")
        console.log(pairs)
        if (pairs.length == 2)
        {
            g_coin0  = pairs[0]
            g_coin1  = pairs[1]
        }
    }
//    var g_coin0 = "{{coin0}}"
//    var g_coin1 = "{{coin1}}"

    $(document).ready(function() {
        vue_init(g_coin0, g_coin1);
        get_all_order_type(g_coin0, g_coin1, 'sell')
        get_all_order_type(g_coin0, g_coin1, 'buy')
        get_curr_market()
    })

    function get_all_order_type(coin_type, use_coin_type, order_type)
    {
        $.post("/btc/get_all_order", {
            coin_type: coin_type,
            use_coin_type : use_coin_type,
            order_type : order_type
        },
        function(jsonobj)
        {
            jsonobj = merge_depths(jsonobj, 1)
            var tofixed_price = coin_tofixed(g_coin0, g_coin1, coin_tofixed_type_price)
            var tofixed_count = coin_tofixed(g_coin0, g_coin1, coin_tofixed_type_count)
            var tofixed_depth_amount = coin_tofixed(g_coin0, g_coin1, coin_tofixed_type_depth_amount)
            len = jsonobj.length
            console.log(jsonobj)
            if (len >= 7)
            {
                len = 7
            }
            if (len == 0)
            {
                return
            }

            max = jsonobj[len-1].depth
            var temp_list = []
            for(i = 0 ;i < len; i ++ )
            {
                var price = jsonobj[i].price;
                var count = jsonobj[i].count;
                var depth = jsonobj[i].depth;
                price = price.toFixed(tofixed_price)
                count = count.toFixed(tofixed_count)
                depth =depth.toFixed(tofixed_depth_amount)
                var d = depth * 100 / max
                var bg_length = 200*d
                //
                temp_list.push({
                    price : price,
                    count : count,
                    bg_length : "width:" + bg_length + "px;", bg_length
                })
            }

            if (order_type == 'sell')
            {
                temp_list.reverse(),
                change_depth_sell(temp_list)

            } else {
                change_depth_buy(temp_list)
            }
    });
}

function merge_depths(jsonobj, deep)
{
    var arr =new Array()
    //obj = new Object()
    var last_price = 0
    var last_count = 0
    var last_cnt = 0
    var cnt  = 0
    for(i = 0 ;i < jsonobj.length; i ++ )
    {
        var price = jsonobj[i].price;
        var count = jsonobj[i].count;
        cnt += count
        if (price == last_price)
        {
            last_count += count
            continue
        }
        else
        {
            if (last_price != 0)
            {
                obj = new Object()
                obj.price = last_price
                obj.count = last_count
                obj.depth = last_cnt
                arr.push(obj)
            }
            last_price = price
            last_count = count
            last_cnt = cnt
        }
    }
    if (last_price != 0)
    {
        obj = new Object()
        obj.price = last_price
        obj.count = last_count
        obj.depth = last_cnt
        arr.push(obj)
    }
    //总额
    //    console.log("jsonobj "  + JSON.stringify(jsonobj))
    //    console.log("array "  + JSON.stringify(arr))
    return arr
}
//
function get_curr_market()
{
    $.post("/btc/get_curr_market", {
            coin_type: g_coin0,
            use_coin_type: g_coin1
        }, function(jsonobj){
        for (i = 0; i < jsonobj.length; i++)
        {
            var info = jsonobj[i];
            var key = info.coin_type + "2" + info.use_coin_type;
            var market = g_markets[key];
            if (market == undefined || market.active == false) {
                continue;
            }

            var tofixed = coin_tofixed(g_coin0, g_coin1, coin_tofixed_type_price)
            var curr = floor_number(info.curr, tofixed)
            change_last_price(curr)
        }
    })
}

</script>
